<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar :title="this.musicListData.musicName[this.orderNum]" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        <van-icon name="arrow-down" />
      </template>
    </van-nav-bar>

    <!-- 中间 -->
    <div class="content">
      <div class="box">
        <div class="imgbox">
          <img :src="this.musicListData.musicPic[this.orderNum]" />
        </div>
        <span>{{ this.musicListData.musicSingerName[this.orderNum] }}</span>
      </div>

      <div class="iconbox">
        <div class="icon">
          <!-- 5个icon -->
          <van-icon name="like-o" size="24" />
          <van-icon name="down" size="24" />
          <van-icon name="smile-comment-o" size="24" />
          <van-icon name="chat-o" size="24" />
          <van-icon name="ellipsis" size="24" class="dot" />
        </div>

        <!-- 控件 -->
        <div class="progressBar">
          <span>00:00</span>
          <!-- 实时进度条 -->
          <van-slider v-model="ProgressVal" @change="onProgress" button-size="8px" active-color="#ee0a24" />
          <span>00:00</span>
        </div>

        <div class="icon">
          <van-icon name="exchange" size="24" />
          <van-icon name="arrow-left" size="24" @click="Prevbtn" />
          <van-icon :name="playName" size="44" @click="playMusic" />
          <van-icon name="arrow" size="24" @click="Nextbtn" />
          <van-icon name="bars" size="24" @click="songList" />
        </div>
      </div>
    </div>
    <!-- 歌单列表弹出 -->
    <van-popup v-model="show" round position="bottom" get-container="body" :style="{ height: '60%' }">
      <div class="dialogbox">
        <p>当前播放(36)</p>
        <div class="Operation">
          <div><van-icon name="exchange" /> <span>随机播放</span></div>
          <div class="iconbox">
            <van-icon name="down" size="18" />
            <van-icon name="add-o" size="18" />
            <van-icon name="delete-o" size="18" />
          </div>
        </div>
        <ul>
          <li class="songlist" v-for="(item, index) of this.songListData" :key="index" @click="clickPlay(index)">
            <div :class="{ active: isActive, uncheck: isUncheck }">
              <span>{{ item.name }}</span> - <span v-for="(k, i) of songListData[index].ar" :key="i">{{ k.name }}</span>
            </div>
            <van-icon name="cross" size="18" />
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'
import eventBus from '../../eventBus.js'
export default {
  components: {
    Aplayer,
  },
  data() {
    return {
      isActive: false,
      isUncheck: true,
      ProgressVal: 0,
      songID: '',
      isPlay: false,
      playName: 'play-circle-o', //暂停
      show: false,
      // 歌曲列表
      songListData: [],
      // 歌曲索引
      orderNum: 0,
      audioObj: null,
    }
  },
  methods: {
    onProgress(ProgressVal) {
      this.audioObj.currentTime = ProgressVal
      this.audioObj.play()
      this.playName = 'pause-circle-o'
      this.isPlay = true
    },
    // 上一首
    Prevbtn() {
      this.orderNum--
      if (this.orderNum < 0) {
        this.orderNum = this.musicListData.musicList.length - 1
      }
      this.switchSong()
    },
    // 下一首
    Nextbtn() {
      this.orderNum++
      if (this.orderNum > this.musicListData.musicList.length - 1) {
        this.orderNum = 0
      }
      this.switchSong()
    },
    //切换歌曲
    switchSong() {
      this.ProgressVal = 0
      this.audioObj.src = this.musicListData.musicList[this.orderNum]
      this.audioObj.play()
      this.playName = 'pause-circle-o'
      this.isPlay = true
    },
    // 播放
    playMusic() {
      if (this.isPlay === false) {
        // 播放
        this.audioObj.play()
        this.playName = 'pause-circle-o'
        this.isPlay = true
      } else {
        // 暂停
        this.audioObj.pause()
        this.playName = 'play-circle-o'
        this.isPlay = false
      }
    },
    clickPlay(i) {
      this.orderNum = i
      this.switchSong()
      this.songHighLight()
    },
    songList() {
      this.show = true
    },
    onClickLeft() {
      window.history.back(-1)
      this.audioObj.pause()
      this.playName = 'play-circle-o'
      this.isPlay = false
    },
    onClickRight() {
      this.$toast('按钮')
    },
  },
  mounted() {},
  watch: {
    songListData(sl) {
      console.log(sl)
    },
  },
}
</script>

<style scoped>
.van-popup {
  background-color: #101010;
  color: var(--font-color);
}
.songlist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0;
}
.Operation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.dialogbox {
  padding: 0 20px;
}
.box {
  margin-bottom: 120px;
  text-align: center;
}
.iconbox i {
  margin-left: 22px;
}
.yd {
  position: absolute;
  top: -2px;
  right: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--font-color);
}
.jd {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: inherit;
  background-color: var(--font-color);
}
.dot {
  transform: rotate(90deg);
}
.progressBar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 20px;
}
.icon {
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.content {
  width: 100%;
  height: calc(100vh - 46px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  background-color: #faebd7;
  padding: 100px 0 20px;
  box-sizing: border-box;
  /* filter: blur(1px); */
}
.imgbox {
  position: relative;
  width: 210px;
  height: 210px;
  background-color: #a7a7a7;
  border-radius: 50%;
  margin-bottom: 20px;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
}
.uncheck {
  color: var(--font-color);
}
.active {
  color: #def959;
}
</style>
